<template>
    <div>
        <!-- 查询参数表单 -->
        <el-form :inline="true" :model="queryParams" class="blog_form">
            <el-row>
                <!-- 请输入博客名 -->
                <el-col :span="3">
                    <el-form-item>
                        <el-input v-model="queryParams.keyword" placeholder="请输入博客名" clearable></el-input>
                    </el-form-item>
                </el-col>
                <!-- 请输入分类名 -->
                <el-col :span="3">
                    <el-select v-model="queryParams.sortKeyword" style="width: 150px" filterable clearable remote
                        reserve-keyword placeholder="请输入分类名">
                        <el-option v-for="item in sortOptions" :key="item.uid" :label="item.sortName"
                            :value="item.uid"></el-option>
                    </el-select>
                </el-col>
                <!-- 请输入标签名 -->
                <el-col :span="3">
                    <el-select v-model="queryParams.tagKeyword" style="width: 150px" filterable clearable remote
                        reserve-keyword placeholder="请输入标签名">
                        <el-option v-for="item in tagOptions" :key="item.uid" :label="item.content"
                            :value="item.uid"></el-option>
                    </el-select>
                </el-col>
                <!-- 推荐等级 -->
                <el-col :span="3">
                    <el-select v-model="queryParams.levelKeyword" style="width: 150px" filterable clearable remote
                        reserve-keyword placeholder="推荐等级">
                        <el-option v-for="item in blogLevelDictList" :key="item.uid" :label="item.dictLabel"
                            :value="item.dictValue"></el-option>
                    </el-select>
                </el-col>
                <!-- 是否发布 -->
                <el-col :span="2">
                    <el-select v-model="queryParams.publishKeyword" style="width: 105px" filterable clearable remote
                        reserve-keyword placeholder="是否发布">
                        <el-option v-for="item in blogPublishDictList" :key="item.uid" :label="item.dictLabel"
                            :value="item.dictValue"></el-option>
                    </el-select>
                </el-col>
                <!-- 是否原创 -->
                <el-col :span="2">
                    <el-select v-model="queryParams.originalKeyword" style="width: 105px" filterable clearable remote
                        reserve-keyword placeholder="是否原创">
                        <el-option v-for="item in blogOriginalDictList" :key="item.uid" :label="item.dictLabel"
                            :value="item.dictValue"></el-option>
                    </el-select>
                </el-col>
                <!-- 文章类型 -->
                <el-col :span="2">
                    <el-select v-model="queryParams.typeKeyword" style="width: 105px" filterable clearable remote
                        reserve-keyword placeholder="文章类型">
                        <el-option v-for="item in blogTypeDictList" :key="item.uid" :label="item.dictLabel"
                            :value="item.dictValue"></el-option>
                    </el-select>
                </el-col>

                <el-form-item>
                    <el-button style="margin-left: 15px;" type="primary" size="medium" icon="el-icon-search"
                        @click="handleFind">查询</el-button>
                </el-form-item>
            </el-row>
        </el-form>


        <!-- 操作按钮 -->
        <el-row :gutter="10" style="margin-bottom: 8px; padding-left: 15px;">
            <el-col :span="1.5">
                <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd">添加博客</el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button class="filter-item" type="warning" icon="el-icon-star-on">本地上传</el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button class="filter-item" type="warning" icon="el-icon-s-flag">导出选中</el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button class="filter-item" type="info" icon="el-icon-folder-opened">添加专题</el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button class="filter-item" type="danger" icon="el-icon-delete"
                    v-permission="'/blog/deleteBatch'">删除选中</el-button>
            </el-col>

        </el-row>

        <!-- 博客列表 -->
        <el-table v-loading="loading" :data="tableData" style="width: 100%;margin-left: 10px;" @sort-change="changeSort">
            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="标题图" width="160" align="center">
                <template slot-scope="scope">
                    <img v-if="scope.row.photoUrl" :src="scope.row.photoUrl" style="width: 130px;height: 70px;">
                </template>
            </el-table-column>

            <el-table-column label="标题" width="160" align="center">
                <template slot-scope="scope">
                    <span @click="onClick(scope.row)" style="cursor:pointer;">{{ scope.row.title }}</span>
                </template>
            </el-table-column>

            <el-table-column label="作者" width="100" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.author }}</span>
                </template>
            </el-table-column>

            <el-table-column label="是否原创" width="100" align="center" sortable="custom" prop="isOriginal">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isOriginal == 1" type="success">原创</el-tag>
                    <el-tag v-else type="info">转载</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="分类" width="100" align="center">
                <template slot-scope="scope">
                    <!-- <span>{{ scope.row.blogSort.sortName }}</span> -->
                </template>
            </el-table-column>

            <el-table-column label="标签" width="200" align="center">
                <template slot-scope="scope">
                    <template>
                        <el-tag style="margin-left: 3px" type="warning" v-if="item" :key="index"
                            v-for="(item, index) in scope.row.tagList">{{ item.content }}</el-tag>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="推荐等级" width="100" align="center" prop="level" sortable="custom">
                <template slot-scope="scope">
                    <el-tag v-for="item in blogLevelDictList" v-if="scope.row.level == item.dictValue">
                        {{ item.dictLabel }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="点击数" width="90" align="center" prop="clickCount" sortable="custom"
                :sort-by="['clickCount']">
                <template slot-scope="scope">
                    <span>{{ scope.row.clickCount }}</span>
                </template>
            </el-table-column>

            <el-table-column label="开启评论" width="100" align="center" prop="clickCount" sortable="custom">
                <template slot-scope="scope">
                    <el-tag v-for="item in openDictList" v-if="scope.row.openComment == item.isDefault"
                        :type="item.listClass" :key="item.uid">{{
                            item.dictLabel }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="发布状态" width="100" align="center" prop="clickCount" sortable="custom">
                <template slot-scope="scope">
                    <el-tag v-for="item in blogPublishDictList" v-if="scope.row.isPublish == item.isDefault"
                        :type="item.listClass" :key="item.uid">{{
                            item.dictLabel }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center" prop="createTime" sortable="custom"
                :sort-orders="['ascending', 'descending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="150">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页查询 -->
        <!--分页-->
        <div class="block">
            <el-pagination align="right" :current-page.sync="currentPage" :page-size="pageSize"
                layout="total, prev, pager, next, jumper" :total="total"
                @current-change="handleCurrentChange"></el-pagination>
        </div>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" fullscreen>
            <el-form :model="form" ref="form" :rules="rules">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                            <el-input v-model="form.title" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="简介" :label-width="formLabelWidth">
                            <el-input v-model="form.summary" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="标题图" :label-width="formLabelWidth">
                            <!-- <div class="imgBody" v-if="form.photoList">
                                <i class="el-icon-error inputClass" v-show="icon"></i>
                                <img v-bind:src="form.photoList[0]" style="display:inline; width: 195px;height: 105px;">
                            </div> -->
                            <div class="uploadImgBody">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- /////////////////////////////////////////////////// -->
                <el-row>
                    <el-col :span="6.5">
                        <el-form-item label="分类" :label-width="formLabelWidth" prop="blogSortUid">
                            <el-select v-model="form.blogSortUid" size="small" placeholder="请选择" style="width:150px">
                                <el-option v-for="item in sortOptions" :key="item.uid" :label="item.sortName"
                                    :value="item.uid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6.5">
                        <el-form-item label="标签" :label-width="formLabelWidth" prop="tagUid">
                            <el-select v-model="form.tagUid" size="small" placeholder="请选择" style="width:150px">
                                <el-option v-for="item in tagOptions" :key="item.uid" :label="item.content"
                                    :value="item.uid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6.5">
                        <el-form-item label="推荐等级" :label-width="formLabelWidth" prop="level">
                            <el-select v-model="form.level" size="small" placeholder="请选择" style="width:150px">
                                <el-option v-for="item in blogLevelDictList" :key="item.uid" :label="item.dictLabel"
                                    :value="parseInt(item.dictValue)"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- /////////////////////////////////////////////////// -->
                <el-row>
                    <el-col :span="6.5">
                        <el-form-item label="是否原创" :label-width="formLabelWidth" prop="isOriginal">
                            <el-radio-group v-model="form.isOriginal" size="small">
                                <el-radio v-for="item in blogOriginalDictList" :key="item.uid" :label="item.dictValue"
                                    border>{{ item.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6.5">
                        <el-form-item label="文章类型" :label-width="formLabelWidth" prop="openComment">
                            <el-radio v-for="item in blogTypeDictList" :key="item.uid" v-model="form.type"
                                :label="item.dictValue" border size="small">{{ item.dictLabel }}</el-radio>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6.5">
                        <el-form-item label="文章评论" :label-width="formLabelWidth" prop="openComment">
                            <el-radio v-for="item in openDictList" :key="item.uid" v-model="form.openComment"
                                :label="item.dictValue" border size="small">{{ item.dictLabel }}</el-radio>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4.5">
                        <el-form-item label="是否发布" :label-width="lineLabelWidth" prop="isPublish">
                            <el-radio-group v-model="form.isPublish" size="small">
                                <el-radio v-for="item in blogPublishDictList" :key="item.uid" :label="item.dictValue"
                                    border>{{ item.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- /////////////////////////////////////////////////// -->

                <el-form-item label="作者" :label-width="formLabelWidth" v-if="form.isOriginal == 0" prop="author">
                    <el-input v-model="form.author" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="文章出处" :label-width="formLabelWidth" v-if="form.isOriginal == 0">
                    <el-input v-model="form.articlesPart" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="外链" :label-width="formLabelWidth" v-if="form.type == 1" prop="outsideLink">
                    <el-input v-model="form.outsideLink" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
                    <RichText :content="form.content"></RichText>
                </el-form-item>

                <el-form-item style="float: right; margin-right: 20px;">
                    <el-button>取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>

<script>
import { getListByDictTypeList } from '@/api/sysDictData'
import { getTagList } from '@/api/tag'
import { getBlogSortList } from '@/api/blogSort'
import { getBlogList, addBlog, editBlog } from '@/api/blog'
// 引入组件
import RichText from '@/components/RichText'
export default {
    name: 'Blog',
    created() {
        // 获取字典
        this.getDictList()
        // 获取标签列表
        this.tagList()
        // 获取博客分类
        this.blogSortList()
        // 获取博客列表
        this.blogList()
    },
    components: {
        RichText
    },
    data() {
        return {
            queryParams: {
                keyword: "",
                tagKeyword: "", //标签搜索
                sortKeyword: "", //分类搜索
                levelKeyword: "", //等级搜索
                publishKeyword: "", // 发布 搜索
                originalKeyword: "", // 原创 搜索
                typeKeyword: "", // 文章类型
            },
            sortOptions: [], //分类候选框
            tagOptions: [], //标签候选框
            tableData: [], //博客数据**
            tagValue: [], //保存选中标签id(编辑时),
            blogOriginalDictList: [], //是否原创
            blogPublishDictList: [], //是否发布
            blogLevelDictList: [], //推荐等级
            openDictList: [], //字典
            blogTypeDictList: [], //博客类型
            currentPage: 1, //当前页
            pageSize: 10, //每页记录数
            total: 0, //总数量
            orderByDescColumn: '', //降序字段
            orderByAscColumn: '', //升序字段
            title: "增加博客",
            // 遮罩层
            loading: false,
            dialogFormVisible: false, //控制弹出框
            isEditForm: false, //是否为编辑框,默认为false
            form: {
                uid: null,
                title: null,
                summary: null,
                content: null,
                tagUid: null,
                fileUid: null,
                isOriginal: '1', //是否原创
                isPublish: '1',
                author: null, //作者
                clickCount: 0,
                articlesPart: null, //文章出处
                type: '0',
                openComment: '1'
            },
            formLabelWidth: "120px",//模态框标签的宽度
            lineLabelWidth: "120px", //一行的间隔数
            maxLineLabelWidth: "100px",
            rules: {
                title: [
                    { required: true, message: '标题不能为空', trigger: 'blur' }
                ],
                blogSortUid: [
                    { required: true, message: '分类不能为空', trigger: 'blur' }
                ],
                tagUid: [
                    { required: true, message: '标签不能为空', trigger: 'blur' }
                ],
                level: [
                    { required: true, message: '推荐等级不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '推荐等级只能为自然数' },
                ],
                isPublish: [
                    { required: true, message: '发布字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '发布字段只能为自然数' },
                ],
                isOriginal: [
                    { required: true, message: '原创字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '原创字段只能为自然数' },
                ],
                openComment: [
                    { required: true, message: '网站评论不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '网站评论只能为自然数' },
                ],
                content: [
                    { required: true, message: '内容不能为空', trigger: 'blur' }
                ],
                outsideLink: [
                    { required: true, message: '外链地址不能为空', trigger: 'blur' },
                    { pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入有效的URL' },
                ],
            }
        }
    },
    methods: {
        // 获取字典
        getDictList() {
            let dictTypeList = ['sys_recommend_level', 'sys_original_status', 'sys_publish_status', 'sys_normal_disable', 'sys_blog_type']
            getListByDictTypeList(dictTypeList).then(res => {
                let dictMap = res.data
                this.blogOriginalDictList = dictMap.sys_original_status
                this.blogPublishDictList = dictMap.sys_publish_status
                this.blogLevelDictList = dictMap.sys_recommend_level
                this.openDictList = dictMap.sys_normal_disable
                this.blogTypeDictList = dictMap.sys_blog_type
            })

        },
        // 获取标签列表
        tagList() {
            let tagParams = {}
            tagParams.pageSize = 500
            tagParams.currentPage = 1
            getTagList(tagParams).then(res => {
                // console.log(res);
                this.tagOptions = res.data.records
            })
        },
        // 获取博客分类
        blogSortList() {
            let blogSortParams = {}
            blogSortParams.pageSize = 500
            blogSortParams.currentPage = 1
            getBlogSortList(blogSortParams).then(res => {
                this.sortOptions = res.data.records
            })
        },
        // 获取博客列表
        blogList() {
            let blogParamas = {}
            blogParamas.pageSize = 10
            blogParamas.currentPage = 1
            getBlogList(blogParamas).then(res => {
                this.tableData = res.data.records
                this.currentPage = res.data.current
                this.pageSize = res.data.size
                this.total = res.data.total
            })
        },
        // 条件查找按钮
        handleFind() {
            let params = {};
            params.keyword = this.queryParams.keyword;
            params.blogSortUid = this.queryParams.sortKeyword;
            params.tagUid = this.queryParams.tagKeyword;
            params.levelKeyword = this.queryParams.levelKeyword;
            params.isPublish = this.queryParams.publishKeyword;
            params.isOriginal = this.queryParams.originalKeyword;
            params.type = this.queryParams.typeKeyword;
            params.currentPage = this.currentPage;
            params.pageSize = this.pageSize;
            params.orderByDescColumn = this.orderByDescColumn
            params.orderByAscColumn = this.orderByAscColumn

            getBlogList(params).then(res => {
                this.tableData = res.data.records
                this.currentPage = res.data.current
                this.pageSize = res.data.size
                this.total = res.data.total
            })
        },
        // 当当前页改变时触发
        handleCurrentChange() {
            let blogParamas = {}
            blogParamas.pageSize = 10
            blogParamas.currentPage = this.currentPage

            getBlogList(blogParamas).then(res => {
                this.tableData = res.data.records
                this.currentPage = res.data.current
                this.pageSize = res.data.size
                this.total = res.data.total
            })

        },
        // 排序字段方法
        changeSort(val) {
            console.log(val);
            if (val.order == 'ascending') {
                this.orderByAscColumn = val.prop // 设置升序字段
                this.orderByDescColumn = '' // 取消降序字段
            } else {
                this.orderByDescColumn = val.prop
                this.orderByAscColumn = ''
            }
            let params = {}
            params.currentPage = this.currentPage
            params.pageSize = this.pageSize
            params.orderByAscColumn = this.orderByAscColumn
            params.orderByDescColumn = this.orderByDescColumn
            getBlogList(params).then(res => {
                this.tableData = res.data.records
                this.currentPage = res.data.current
                this.pageSize = res.data.size
                this.total = res.data.total
            })
        },
        // 添加博客
        handleAdd() {
            this.dialogFormVisible = true
        },
        // 点击确认添加或确认编辑
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    console.log('校验出错');
                } else {
                    if (this.isEditForm) {
                        // 编辑页面
                        editBlog(this.form).then(res => {
                            // 将对话框关闭
                            this.dialogFormVisible = false;
                        })
                    } else {
                        // 添加页面
                        addBlog(this.form).then(res => {
                            // 将对话框关闭
                            this.dialogFormVisible = false;
                        })
                    }
                }

            })
        },
        handleEdit(row) {
            // 不判断是否继续上次编辑
            this.title = '编辑博客'
            this.dialogFormVisible = true
            this.form = row
        },
        getFormObject: function () {
            let formObject = {
                uid: null,
                title: null,
                summary: null,
                content: null,
                tagUid: null,
                fileUid: null,
                isOriginal: this.blogOriginalDefault, //是否原创
                isPublish: this.blogOriginalDefault, //是否发布
                type: this.blogTypeDefault, // 文章类型
                author: null, //作者
                level: 0, //推荐等级，默认是正常
                openComment: this.openDefault, // 是否启动
                articlesPart: null //文章出处，默认蘑菇博客
            };
            return formObject;
        },
        handleDelete(row) {
            // console.log(row);
        }
    },
    watch: {
        // 被侦听的变量count
        dialogFormVisible() {
            if (this.dialogFormVisible == false) {
                this.form = this.getFormObject()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.blog_form {
    padding: 15px 3px 0px 10px
}

.imgBody {
    width: 195px;
    height: 105px;
    border: solid 2px #ffffff;
    float: left;
    position: relative;
}

.uploadImgBody {
    margin-left: 5px;
    width: 195px;
    height: 105px;
    border: dashed 1px #c0c0c0;
    float: left;
    position: relative;
}

.uploadImgBody :hover {
    border: dashed 1px #00ccff;
}

.inputClass {
    position: absolute;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 195px;
    height: 105px;
    line-height: 105px;
    text-align: center;
}
</style>